<template>
  <div>
    <Input
      v-model="value"
      placeholder="Enter something..."
      @on-enter="search"
    />
    <div class="tag-wrap">
      <Tag style="cursor: pointer;" size="large" color="blue" v-for="(tag) in tagList" :key="tag.tagId">
        <span @click.stop="actionTag(tag.tagName)">{{ tag.tagName }}</span>
      </Tag>
    </div>
  </div>
</template>

<script>
import { getAllTag } from '@/api/tag.js';
export default {
  name: "mx-filter",
  data() {
    return {
      value: "",
      tagList: []
    };
  },
  methods: {
    search() {
      this.$emit('search', this.value)
    },
    getAllTag() {
      getAllTag().then(res => {
        if(res.status === 200 && res.data.code === 0) {
          this.tagList = res.data.data
        }
      })
    },
    actionTag(tagName) {
      this.$emit('click-tag', tagName)
    }
  },
  created() {
    this.getAllTag()
  },
};
</script>

<style>

</style>
